import React from "react";
import { Icon, Tooltip } from "antd";
import classNames from "classnames";
import { WeaInput,WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import { SortableElement } from 'react-sortable-hoc';

@SortableElement
export default class OptionItem extends React.Component {
  constructor() {
    super();

    this.onSelect = this.onSelect.bind(this);
    this.onRemove = this.onRemove.bind(this);
    this.onShowNameChange = this.onShowNameChange.bind(this);
  }

  onShowNameChange(showname) {
    const { onChange, item } = this.props;

    item.showname = showname;

    onChange(item);
  }

  onSelect() {
    const { item, onChange } = this.props;

    item.selected = !item.selected;

    onChange(item);
  }

  onRemove() {
    const { item, onRemove } = this.props;

    onRemove(item);
  }

  render() {
    const { showname, selected } = this.props.item;
    const title = selected ? getLabel('502264','取消默认值')  : getLabel('502265','设为默认值') ;

    return (
      <div className='wea-edc-opt-item'>
        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8jhlqr`} type="bars" />
        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@crhg1n`} type="check" title={title} className={classNames({ selected })} onClick={this.onSelect} />
        <div>
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hdbh0g`} inputType={'multilang'} value={showname} onChange={this.onShowNameChange} placeholder={getLabel('502266','请输入选项') } />
        </div>
        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@m9j8bh`} type="cross-circle" onClick={this.onRemove} />
      </div>
    );
  }
}

OptionItem.defaultProps = {
  item: {},
  onSelect: () => { },
  onRemove: () => { },
  onShowNameChange: () => { }
};